<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ahorro</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.8.21.custom.css"
	rel="stylesheet" />
<!-- bin/jquery.slider.min.css -->
<link rel="stylesheet" href="css/slider/jslider.css" type="text/css">
<link rel="stylesheet" href="css/slider/jslider.blue.css"
	type="text/css">
<link rel="stylesheet" href="css/slider/jslider.plastic.css"
	type="text/css">
<link rel="stylesheet" href="css/slider/jslider.round.css"
	type="text/css">
<link rel="stylesheet" href="css/slider/jslider.round.plastic.css"
	type="text/css">
<!-- end -->

<style type="text/css">
.tip {
	background-color: #ffcc99;
	padding: 10px;
	display: none;
	position: absolute;
	border: 1px solid black;
}
</style>
<!--  jQuery core. -->
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<!--  Donut -->

<script type="text/javascript" src="scripts/jquery.donutchart.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="scripts/excanvas.compiled.js"></script>
<![endif]-->
<!--  jQuery UI-->
<script type="text/javascript" src="scripts/ui/jquery-ui-1.8.21.custom.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.core.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.widget.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.button.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.sortable.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.progressbar.js"></script>


</head>
<body>
	<h1>xxxxxxxxxxxx</h1>
	
	<div id="meta_content">
	
	
		<form action="bk+metas+home.html">
		<button>Metas</button>
		</form>

		<form action="bk+metas+hitos.html">
		<button>Hitos</button>
		</form>
		<form id="formNueva" action="bk+metas+hitos.html">
		<button>Nueva</button>
		</form>
	
	</div>
	<div id="meta_content">
		<div id="meta_grid">
			<ul id="meta_calendar">
				<li><p>31/01/2012</p>
				</li>
				<li><p>28/02/2012</p>
				</li>
				<li><p>30/03/2012</p>
				</li>
				<li><p>31/04/2012</p>
				</li>
				<li><p>30/05/2012</p>
				</li>
				<li><p>31/06/2012</p>
				</li>
			</ul>
		</div>
		<div id="meta_group">
			<ul class="meta_list">
			<li id="meta_1" date-day="15">
				<div class="meta_single ui-corner-all" >
				<div class="meta_picture">
					<img src="./images/nophoto.png" alt="Sin Imagen" />
				</div>
					
				<div class="meta_rest_money">
					<strong>titulo meta</strong><br />99,999.99 EUR | tienes 99,999.99 EUR
				</div>
				<div class="meta_donut" data-percent="75" style="width:200px">75</div>
				<div class="meta_rest_money">
					<br/>
					<strong>75 meses</strong> | faltan 25 meses
				</div>
				<div style="clear:both">	
					<div class="meta_progress">xxx</div>					
				</div>										
			</div>
			</li>
			<li id="meta_2" date-day="1">
			<div class="meta_single ui-corner-all" >
				<div class="meta_picture">
					<img src="./images/nophoto.png" alt="Sin Imagen" />
				</div>
					
				<div class="meta_rest_money">
					<strong>titulo meta</strong><br />99,999.99 EUR | tienes 99,999.99 EUR
				</div>
				<div class="meta_donut" data-percent="75" style="width:200px">75</div>
				<div class="meta_rest_money">
					<br/>
					<strong>50 meses</strong> | faltan 12,5 meses
				</div>
				<div style="clear:both">	
					<div class="meta_progress">xxx</div>					
				</div>										
				
			</div>
			</li>
			<li id="meta_3" date-day="31">
			<div class="meta_single ui-corner-all" >
				<div class="meta_picture">
					<img src="./images/nophoto.png" alt="Sin Imagen" />
				</div>
					
				<div class="meta_rest_money">
					<strong>titulo meta</strong><br />99,999.99 EUR | tienes 99,999.99 EUR
				</div>
				<div class="meta_donut" data-percent="75" style="width:200px">75</div>
				<div class="meta_rest_money">
					<br/>
					<strong>10 meses</strong> | faltan 3 meses
				</div>
				<div style="clear:both">	
					<div class="meta_progress">xxx</div>					
				</div>										
				
			</div>
			</li>
			</ul>
			
		</div>
		<div id="meta_group" style="display:none">
			<ul class="meta_list">
			<li id="meta_1" date-day="15">
				<div class="meta_single ui-corner-all" >
				<div class="meta_picture">
					<img src="./images/nophoto.png" alt="Sin Imagen" />
				</div>
					
				<div class="meta_rest_money">
					<strong>titulo meta</strong><br />99,999.99 EUR | tienes 99,999.99 EUR
				</div>
				<div class="meta_donut" data-percent="75" style="width:200px">75</div>
				<div class="meta_rest_money">
					<br/>
					<strong>75 meses</strong> | faltan 25 meses
				</div>
				<div style="clear:both">	
					<div class="meta_progress">xxx</div>					
				</div>										
			</div>
			</li>
			<li id="meta_2" date-day="1">
			<div class="meta_single ui-corner-all" >
				<div class="meta_picture">
					<img src="./images/nophoto.png" alt="Sin Imagen" />
				</div>
					
				<div class="meta_rest_money">
					<strong>titulo meta</strong><br />99,999.99 EUR | tienes 99,999.99 EUR
				</div>
				<div class="meta_donut" data-percent="75" style="width:200px">75</div>
				<div class="meta_rest_money">
					<br/>
					<strong>50 meses</strong> | faltan 12,5 meses
				</div>
				<div style="clear:both">	
					<div class="meta_progress">xxx</div>					
				</div>										
				
			</div>
			</li>
			<li id="meta_3" date-day="31">
			<div class="meta_single ui-corner-all" >
				<div class="meta_picture">
					<img src="./images/nophoto.png" alt="Sin Imagen" />
				</div>
					
				<div class="meta_rest_money">
					<strong>titulo meta</strong><br />99,999.99 EUR | tienes 99,999.99 EUR
				</div>
				<div class="meta_donut" data-percent="75" style="width:200px">75</div>
				<div class="meta_rest_money">
					<br/>
					<strong>10 meses</strong> | faltan 3 meses
				</div>
				<div style="clear:both">	
					<div class="meta_progress">xxx</div>					
				</div>										
				
			</div>
			</li>
			</ul>
			
		</div>		
	</div>



<script type="text/javascript">

$(document).ready(
	function(){
    /*$(".meta_draggable").draggable({axis:"x",
									cursor: "pointer", 
    								snapMode: "outer",
    								opacity:0.60,												
    								containment: 'parent'});*/ 
							
					
	// Dependiendo del dia, posicionaremos el inicio de la meta dentro del mes en el que se posicione
	var widthCalendar=($('ul.#meta_calendar li').css('width')).replace("px","");
	$('ul.meta_list li').each(function(index) {
		var day=$(this).attr("date-day");
		if (day==null || day== "" || parseFloat(day) > 31 || parseFloat(day) < 0)
			day = 0;
		
		var posCalendar=parseFloat(widthCalendar*day/31);
		posCalendar+="px";
		
	    //$(this).css("margin-left",posCalendar);
	    $(this).animate({"margin-left": posCalendar},2000);
	    
	});
	
									    									
    $(".meta_progress_slider").slider({ disabled:true, range: 'min' , value: 25, values: [10,33,43] });
    
	$(".meta_donut").html("");    
    $(".meta_donut").donutchart({
    'bgColor' : '#ddd',
    'fgColor' : '#ccc',
    'size' : 50,
    'donutwidth': 15,
    'textsize': 16,
  	});    
	$(".meta_donut").donutchart("animate");
    
    $(".meta_progress").html("");
    $(".meta_progress").progressbar({ value: 37, disabled: true});
//  	alert ($("#meta_progress").progressbar( "option", "value" ));

	 		$( "button" ).button({
	            icons: {
	                primary: "ui-icon-locked"
	            }
            });
	 
	$("a").personalbar( );
	})

</script>
</body>
</html>